<template>
	<view class="list">
		<!-- <nav-bar class="i_top" isBack title="看案例"> -->
			<!-- <view class="i_tCan" slot="center"> -->
				<!-- <view :class="{active:tab == 1}" @click="tabtop(1)">看案例<text></text></view>
				 -->
				<!-- <view :class="{active:tab == 2}" @click="tabtop(2)">3D装修<text></text></view> -->
			<!-- </view> -->
		<!-- </nav-bar> -->
		<nav-bars  bgColor="#fff" fontColor="#000" title="看案例"></nav-bars>
		<!-- 筛选框 -->
		<view class="l_top" :class="{'isOver': selectIsOver}" :style="{'top': navHeight + 'px'}">
			<view class="l_tFilt">
				<view class="l_tText" @tap="selectToggle">
					<view class="l_tIcon" :class="{'active': selectBox}"></view>
					<text>{{selectText ? selectText : '筛选'}}</text>
				</view>
			</view>
			<view class="l_tPop" :class="{'active': selectBox}" @touchmove.stop.prevent="moveHandle">
				<view class="l_tBg" @tap="selectToggle"></view>
				<view class="l_tBox">
					<view class="l_search">
						<view class="l_sList">
							<view class="l_sItem">
								<view class="l_sLabel">户型</view>
								<view class="l_sVal">
									<scroll-view class="l_sCan" scroll-x>
										<view class="l_sTags">
												<view class="l_sTag" v-for="(item, index) in bedroom" :key="index" :class="{'active': selectroom === item.value}" @tap="selectTag('selectroom', item.value, item.name)">{{item.name}}</view>
										</view>
									</scroll-view>
								</view>
							</view>
							<view class="l_sItem">
								<view class="l_sLabel">面积</view>
								<view class="l_sVal">
									<scroll-view class="l_sCan" scroll-x>
										<view class="l_sTags">
												<view class="l_sTag" v-for="(item, index) in area_section" :key="index" :class="{'active': selectArea === item.value}" @tap="selectTag('selectArea', item.value, item.name)">{{item.name}}</view>
										</view>
									</scroll-view>
								</view>
							</view>
							<view class="l_sItem">
								<view class="l_sLabel">风格</view>
								<view class="l_sVal">
									<scroll-view class="l_sCan" scroll-x>
										<view class="l_sTags">
												<view class="l_sTag" v-for="(item, index) in design_style" :key="index" :class="{'active': selectStyle === item.id}" @tap="selectTag('selectStyle', item.id, item.name)">{{item.name}}</view>
										</view>
									</scroll-view>
								</view>
							</view>
							<view class="l_sItem">
								<view class="l_sLabel">预算</view>
								<view class="l_sVal">
									<scroll-view class="l_sCan" scroll-x>
										<view class="l_sTags">
												<view class="l_sTag" v-for="(item, index) in budget_section" :key="index" :class="{'active': selectFee === item.value}" @tap="selectTag('selectFee', item.value, item.name)">{{item.name}}</view>
										</view>
									</scroll-view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="l_search">
			<view class="l_sList" id="searchBox">
				<view class="l_sItem">
					<view class="l_sLabel">户型</view>
					<view class="l_sVal">
						<view class="l_sCan">
							<view class="l_sTags">
									<view class="l_sTag" v-for="(item, index) in bedroom" :key="index" :class="{'active': selectroom === item.value}" @tap="selectTag('selectroom', item.value, item.name)">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="l_sItem">
					<view class="l_sLabel">面积</view>
					<view class="l_sVal">
						<view class="l_sCan">
							<view class="l_sTags">
									<view class="l_sTag" v-for="(item, index) in area_section" :key="index" :class="{'active': selectArea === item.value}" @tap="selectTag('selectArea', item.value, item.name)">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="l_sItem">
					<view class="l_sLabel">风格</view>
					<view class="l_sVal">
						<view class="l_sCan">
							<view class="l_sTags">
									<view class="l_sTag" v-for="(item, index) in design_style" :key="index" :class="{'active': selectStyle === item.id}" @tap="selectTag('selectStyle', item.id, item.name)">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="l_sItem">
					<view class="l_sLabel">预算</view>
					<view class="l_sVal">
						<view class="l_sCan">
							<view class="l_sTags">
									<view class="l_sTag" v-for="(item, index) in budget_section" :key="index" :class="{'active': selectFee === item.value}" @tap="selectTag('selectFee', item.value, item.name)">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 数据列表 -->
		<view class="l_data">
			<view class="l_dContain">
				<view class="l_dCan">
					<!-- 装修案例 -->
					<view class="l_dList">
						<view class="l_dDemo">
							<view v-for="item in demoList" :key="item.id">
								<view class="l_ddItem" @tap="toDetail(item.id)">
									<view class="l_ddBanner"><image :src="item.thumb_url[0].path"></image>
									<view class="i_tBtn" @tap.stop="dviewr(item.display_url)" v-if="item.display_url">
										<view class="i_tbImg"><image src="@/static/home/3d.png"></image></view>
										<view class="i_tbTxt">3D</view>
									</view>
									</view>
									<view class="l_ddInfo">
										<view class="l_ddTag" v-if="item.design_style"><text v-for="(items,index) in item.design_style">{{items.name}}</text></view>
										<view class="l_ddCont">
											<view class="l_ddVal">
												<text class="pR-32">报价：{{item.offer}}万</text>
												<text>{{item.area}}m²</text><text class="l_ddCutLine"></text>
												<text>{{item.house_type}}</text><text class="l_ddCutLine"></text>
											</view>
										</view>
									</view>
									<view class="l_ddRemark">{{item.title}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// import navBar from "@/components/navBar/navBar.vue"
import service_design from '@/service/team.js'

export default {
	data() {
		return {
			demoList: [],
			// 筛选框
			selectTop: 0,
			budget_section:[],
			area_section:[],
			design_style:[],
			tab:1,
			bedroom:[
				{
				  id: 1,
				  name: "一室",
				  value: "1"	
				},
				{
				  id: 2,
				  name: "二室",
				  value: "2"	
				},
				{
				  id: 3,
				  name: "三室",
				  value: "3"	
				},
				{
				  id: 4,
				  name: "四室",
				  value: "4"	
				},
				{
					id: 5,
					name: '五室',
					value: 5,
				},
				{
					id: 6,
					name: "五室及以上",
					value: "5,20"
				}
			],
			selectIsOver: false,
			selectArea: '',
			selectStyle: '',
			selectroom:'',
			selectFee: '',
			selectText: '',
			selectBox: false,
			designerId:'',
			currentPage:1,
			estate_id:null, //小区id
			is_display:0,
		}
	},
	
	computed: {
		navHeight() { // Nav栏高度
			var navHeights = uni.getStorageSync('StatusBarHeight')
			return navHeights.height
		},
	},
	
	// components: { navBar },
	
	onLoad(params) {
		this.$utils.getUrl()
		this.designerId = params.designerId
		this.estate_id = params.estate_id
		this.getOptions()
		this.getList()
	},
	
	onReady() {
		let _this = this
		
		// 获取筛选框高度
		let Query = uni.createSelectorQuery()
		Query.select("#searchBox").boundingClientRect(data => {
			if (data.height) _this.selectTop = data.height
		}).exec()
	},
	
	onPageScroll(e) {
		if (this.selectTop && e.scrollTop > this.selectTop) {
			if (!this.selectIsOver) this.selectIsOver = true
		}
		else {
			if (this.selectIsOver) this.selectIsOver = false
		}
	},
	onReachBottom() {
		this.currentPage++
		this.getList()
	},
	methods: {
		dviewr(item){
			let url = encodeURIComponent(item)
			uni.navigateTo({
				url: '/pages_3D/pages/3D/panorama?url='+ url 
			});
		},
		tabtop(e){
			this.tab=e
			if(e==1){
				this.is_display == 0
			}else{
				this.is_display == 1
			}
			this.currentPage=1
			this.selectArea= ''
			this.selectStyle= ''
			this.selectroom=''
			this.selectFee=''
			this.selectText= ''
			this.demoList = []
			 this.getList()	
		},
		// 获取筛选条件
		getOptions() {
			service_design.getOptionList()
				.then(res => {
					if (res.code == 1) {
						let data = res.data
						this.budget_section=data.budget_section
						this.area_section=data.area_section
						this.design_style=data.design_style
					}
			})
		},
		
		// 获取数据列表
		getList() {
			let params = {
				// estate_id:this.estate_id,
				designerId: this.designerId,
				bedroom_num:this.selectroom,
				style: this.selectStyle,
				area: this.selectArea,
				offer: this.selectFee,
				// is_display:this.is_display,
				page: this.currentPage,
				// is_display:0,
				pagesize:15,
			}
			service_design.getDemoList(params)
				.then(res => {
					if (res.code == 1) {
						let data = res.data
						// 处理数据
						for (let i = 0; i < data.length; i++) {
							this.demoList.push(data[i])
						}
					}
			})
		},
	
		toDetail(caseId) {
			uni.navigateTo({ url: '/pages_two/pages/construction/demo/demo?caseId=' + caseId })
		},
		
		// 筛选框==
		// 选择筛选条件
		selectTag(type, id, name) {
			if (this[type] !== id) {
				this[type] = id
				let selectText = ''
				console.log(type)
				// 户型
				let selectroom = this.selectroom
				let selectroomList = this.bedroom
				if (selectroom !== null) {
					for (let i = 0; i < selectroomList.length; i++) {
						if (selectroomList[i].id === selectroom) {
							selectText += selectroomList[i].name + ' | '
							break
						}
					}
				}
				// 面积
				let selectArea = this.selectArea
				let selectAreaList = this.area_section
				if (selectArea !== null) {
					for (let i = 0; i < selectAreaList.length; i++) {
						if (selectAreaList[i].id === selectArea) {
							selectText += selectAreaList[i].name + ' | '
							break
						}
					}
				}
				// 风格
				let selectStyle = this.selectStyle
				let selectStyleList = this.design_style
				if (selectStyle !== null) {
					for (let i = 0; i < selectStyleList.length; i++) {
						if (selectStyleList[i].id === selectStyle) {
							selectText += selectStyleList[i].name + ' | '
							break
						}
					}
				}
				// 预算
				let selectFee = this.selectFee
				let selectFeeList = this.budget_section
				if (selectFee !== null) {
					for (let i = 0; i < selectFeeList.length; i++) {
						if (selectFeeList[i].id === selectFee) {
							selectText += selectFeeList[i].name + ' | '
							break
						}
					}
				}
				this.selectText = selectText.slice(0, selectText.length - 2)
			}else{
				if(type == 'selectArea' ){
					this.selectArea = ''
				}else if ( type == 'selectStyle'){
					this.selectStyle = ''
				}else if(type == 'selectFee'){
					this.selectFee = ''
				}else{
					this.selectroom=''
				}
			}
			this.currentPage = 1
			this.demoList = []
			this.getList()
		},
		
		// 展示隐藏筛选框
		selectToggle() {
			if (this.selectIsOver) {
				this.selectBox = !this.selectBox
			}
		},
		
		moveHandle() {},
	}
}
</script>

<style lang="scss" scoped>

.list {min-height: 100vh;background: #fff;}
.list .i_top {position: relative;z-index: 100;
	.i_tCan {width: 100%;height: 66rpx;padding-left: 50rpx;padding-right: 50rpx;
	        view{display: inline-block;width: 50%;text-align: center;line-height: 66rpx;position: relative;
			}
			.active{
				text{
					position: absolute;
					bottom:0;
					left: 50%;
					margin-left: -20rpx;
					display: block;
					width: 40rpx;
					height: 8rpx;
					border-radius: 8rpx;
					background: #FFD425;
				}
			}
	}
	
}

// 筛选框=====
.l_top {width: 100vw;height: 80rpx;background: #fff;position: fixed;left: 0;z-index: 3;
	&.isOver {box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, .16);}
	.l_tFilt {height: 100%;background: #fff;position: relative;z-index: 2;}
	.l_tText {height: 80rpx;line-height: 80rpx;color: #a98f68;font-size: 24rpx;padding: 0 24rpx 0 40rpx;position: relative;float: left;}
	.l_tIcon {margin-top: -4rpx;border: 8rpx solid transparent;border-top-color: #a58f6d;position: absolute;top: 50%;right: 0;transition: transform .3s;transform: rotate(0);transform-origin: 50% 25%;
		&.active {transform: rotate(180deg);transform-origin: 50% 25%;}
	}
	.l_tPop {width: 100%;height: 100vh;position: absolute;top: 0;left: 0;z-index: 1;visibility: hidden;transition: visibility .3s;
		&.active {visibility: visible;
			.l_tBg {opacity: 1;}
			.l_tBox {transform: translateY(0);}
		}
	}
	.l_tBg {width: 100%;height: 100%;background: rgba(0, 0, 0, .6);opacity: 0;transition: opacity .3s;}
	.l_tBox {width: 100%;position: absolute;top: 0;transition: transform .3s;transform: translateY(-100%);}
}
.list .l_search {padding-top: 80rpx;background: #fff;position: relative;z-index: 2;box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, .16);
	.l_sList {padding: 0 0 36rpx 40rpx;}
	.l_sItem {height: 50rpx;margin-top: 20rpx;
		&:nth-child(1) {margin-top: 0;}
	}
	.l_sLabel {line-height: 52rpx;font-weight: bold;padding-right: 40rpx;float: left;}
	.l_sVal {height: 50rpx;overflow: hidden;}
	.l_sCan {height: 80rpx;overflow-x: auto;}
	.l_sTags {white-space: nowrap;}
	.l_sTag {height: 50rpx;line-height: 50rpx;font-size: 24rpx;padding: 0 20rpx;display: inline-block;
		&.active {color: #a98f68;border-radius: 26rpx;background: #f9f6f3;}
		&:nth-last-child(1) {margin-right: 20rpx;}
	}
}


// 数据列表（案例、动态、评价）=====
.list .l_data {padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);}
// 数据列表
.list .l_data .l_dList {background: #fff;}
// 设计案例 底线
.list .l_data .l_dDemo .l_ddItem {position: relative;
	&::after {content: "";height: 1px;background: #f4f4f4;position: absolute;bottom: 0;left: 32rpx;right: 32rpx;transform: scaleY(.5);}
	&:nth-last-child(1)::after {content: none;}
}
// 装修案例
.list .l_data .l_dDemo {padding: 28rpx 0 40rpx;
	.l_ddItem {padding: 42rpx 0 40rpx;
		&:nth-child(1) {padding-top: 0;}
	}
	.l_ddBanner {height: 376rpx;margin: 0 32rpx;border-radius: 8rpx;background: #f0f0f0;overflow: hidden;position: relative;}
	.l_ddInfo {line-height: 34rpx;font-size: 24rpx;margin: 18rpx 32rpx 0;}
	.l_ddTag {height: 36rpx;line-height: 36rpx;color: #a98f68;font-size: 20rpx;padding: 0 20rpx;margin-top: -2rpx;margin-right: 16rpx;border-radius: 18rpx;background: #f9f6f3;float: left;}
	.l_ddCont {overflow: hidden;}
	.l_ddVal {display: flex;flex-wrap: wrap;align-items: center;}
	.l_ddCutLine {width: 1px;height: 12rpx;margin: 0 8rpx;background: #333;display: inline-block;
		&:nth-last-child(1) {display: none;}
	}
	.l_ddRemark {line-height: 44rpx;font-size: 32rpx;font-weight: bold;padding-left: 36rpx;margin-top: 8rpx;}
}
.i_tBtn {width: 102rpx;height: 102rpx;background: rgba(0, 0, 0, .4);border: 1px solid #fff;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 2;}
.i_tbImg {width: 42rpx;height: 42rpx;margin: 20rpx auto 0;}
.i_tbTxt {width: 100%;height: 34rpx;line-height: 34rpx;text-align: center;color: #fff;font-size: 24rpx;position: absolute;top: 58rpx;left: 0;}
</style>